<template>
    <div class="fileinfo">
       <Row class="detail_content"  v-for="(item,index) in fileList">
           <Card>
                <Col class="custom_info" :span="10">
                    <ul class="over">
                        <li>
                            <span>申请编号:</span>
                            <span>{{item.dcpostfileCamainNo}}</span>
                        </li>
                        <li>
                            <span>证件号码</span>
                            <span>{{item.caafterCard}}</span>
                        </li>
                        <li>
                            <span>客户姓名:</span>
                            <span>{{item.caafterBorrowername}}</span>
                        </li>
                        <!--<li>-->
                            <!--<span>联系方式:</span>-->
                            <!--<span></span>-->
                        <!--</li>-->
                        <li>
                            <span>订单状态:</span>
                            <span>{{item.statusName}}</span>
                        </li>
                        <li>
                            <span>归档状态:</span>
                            <span>{{item.statusfilename}}</span>
                        </li>
                    </ul>
                    <!--<Button type="primary">邮寄<span></span>次</Button>-->
                </Col>
                <Col class="file_photo" :span="10" :offset="2">
                    <span>邮寄归档</span>
                    <div class="mt10">
                        <Button type="primary" v-for="(itemChild,indexChild) in item.filetypes">{{itemChild}}</Button>
                    </div>
                    <div>
                        <img  :src="'data:image/jpeg;base64,'+itemurl" width="80"  height="80" v-for="(itemurl,itemIndex) in item.imgurlList" style="margin-right: 10px;"/>
                    </div>
                </Col>
                <Col class="btns" :span="2">
                        <Button type="primary" :disabled="!isEdit" @click="editFile(item.cacontractId)">编辑</Button><Button type="primary" :disabled="!isEdit" @click="delFile(item.id)">删除</Button>
                </Col>
           </Card>
       </Row>
       <div class="page mt10" style="text-align: right;">
            <Page :current="pageData.pageNumber" :transfer="true" :total="pageData.total" :page-size="pageData.pageSize" @on-change="changePage"
                    @on-page-size-change="changePageSize" :page-size-opts="pageSizeOpts" size="small" show-total
                    show-elevator show-sizer></Page>
        </div>
    </div>
</template>
<script>
    import {
         downFile,
    } from "_p/afs-apply/api/mail-manage/orderMailList.js";
    export default {
        name:'fileinfo',
        data(){
            return{
                fileList:[
                ],
                pageData:{
                    pageNumber:1,
                    pageSize:10,
                    total:0
                },
                pageSizeOpts:[10,20,50,100],
            }
        },
        props:{
            fileInfoList:{
                type:Array
            },
            total:{
                type:Number
            },
            isEdit:{
                type:Boolean
            }
        },
        watch:{
              fileInfoList(val){
                if(Object.keys(val).length>0){
                    this.fileList=val;
                    this.pageData.total=this.total;
                    console.log(this.fileList,"this.fileList")
                    this.fileList.forEach((item,index)=>{
                        let imgurlList=[];
                        item.md5List.forEach(itemPic=>{
                            // const blob = new Blob([itemPic],{ type: 'image/*' })
                            // let imgurl = window.URL.createObjectURL(blob);
                            imgurlList.push(itemPic);
                            item.imgurlList=imgurlList;
                        })
                    })
                }
            },
        },
        methods:{
            downFiles(md5){
                downFile(md5).then(res=>{
                    if(res.code=="0000"){
                        console.log(res,res)
                    }
                })

            },
            changePageSize(size){
                this.pageData.pageSize=size;
                this.$emit('turnPageSize',this.pageData)
            },
            changePage(number){
                this.pageData.pageNumber=number;
                this.$emit('turnPage',this.pageData)
            },
            delFile(fileid){
                if(this.isEdit){
                   this.$emit('deleteFile',fileid)
                }
            },
            editFile(cacontractId){
                if(this.isEdit){
                    this.$emit("compileFile",cacontractId)
                }
            }

        }
    }
</script>
<style scoped>
    .fileinfo>.detail_content{
        padding-left: 20px;
        color:#333333;
    }
    .detail_content  .custom_info>ul>li{
        float:left;
        width: 50%;
        margin-bottom: 10px;
    }
    .detail_content>>>.ivu-card-body{
        position: relative;
    }
    .detail_content>>>.ivu-card-body::after{
        content: "";
        width: 1px;
        height: 80%;
        background-color: #e8eaec;
        position: absolute;
        left: 41.66666667%;
        top: 50%;
        transform: translateY(-50%);
    }
    .btns{
       position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }
    .btns>button{
        display: block;
        margin-bottom: 20px;
    }
    .fileinfo>>>.ivu-card-body{
        overflow: hidden;
    }
    .file_photo>div>button{
        margin-right: 10px;
        margin-bottom: 10px;
    }
</style>
